<!-- 1. Canvas 실습  -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas Example1</title>
	<script>
		window.onload = function(){
		// 1. 기본 예 	
		/* 	var canvas = document.getElementById("A");
			var ctx = canvas.getContext("2d");
			ctx.strokeStyle = "#000000";
			ctx.strokeRect(10,10,100,100); */
			
		// 2. fillStyle : 도형 안에 색을 채운다. 
			canvas = document.getElementById('A');
			ctx = canvas.getContext('2d');
			color = '#000000';
			ctx.fillStyle = color;
			ctx.fillRect(10,10,100,100)

		// 3. strokeStle : 도형의 선 색을 정한다. 
			canvas = document.getElementById('A');
			ctx = canvas.getContext('2d');
			color = '#000000';
			ctx.strokeStyle = color;
			ctx.strokeRect(10,10,100,100);
			ctx.fillRect(10,120,100,100);

		// 4.lineWidth : 선 굵기 지정  
			var canvas = document.getElementById("A");
			var ctx = canvas.getContext("2d");
			ctx.strokeStyle = "#000000";
			ctx.lineWidth = '1';
			ctx.strokeRect(10,10,100,100);	
			ctx.lineWidth = '10';
			ctx.strokeRect(130,10,100,100);

		// 5. 	
			
		}
	</script>
</head>
<body>
	<canvas id = "A" width = "400px" height = "300px"></canvas>

</body>
</html>